<template>
    <!-- 买车 -->
    <view class="pageContent">

        <view class="car-search row-center">
            <view class="select-area-item">
                <view class="row-center" @click="openAdress(1)">
                    <text>类型：</text>
                    <text class="area-name ellipsis-text">{{ vehicleName || '全部' }}</text>
                </view>
                <u-icon v-if="vehicleName == ''" name="arrow-down-fill" @click="openAdress(1)"></u-icon>
                <u-icon v-else name="close-circle-fill" size="30rpx" @click="clearFilx()"></u-icon>
            </view>
            <view class="select-area-item">
                <view class="row-center" @click="openAdress(2)">
                    <text>价格：</text>
                    <text class="area-name ellipsis-text">{{ pricerStr || '全部' }}</text>
                </view>
                <u-icon v-if="pricerStr == ''" name="arrow-down-fill" @click="openAdress(2)"></u-icon>
                <u-icon v-else name="close-circle-fill" size="30rpx" @click="clearFilx()"></u-icon>
            </view>
        </view>
        <view class="car-list" @click="toDetail(item)" v-for="(item,index) in BuyList" :key="index">
            <view class="car-item">
                <image class="car-img" :src="item.images" mode=""></image>
                <view class="car-info">
                    <view class="info-text">{{item.brand}}({{item.colour}})</view>
                    <view class="info-text1">{{item.vehicleTypeName}}</view>
                    <view class="info-text1">{{item.lockForTime}}</view>
					<view class="info-flex">
                    <view class="info-text2">{{item.guidePrice}}</view>
					<view class="removed" v-if="item.status == 1" @click.stop="removed(item.id)">下架</view>
					</view>
                </view>
            </view>
        </view>
		<view class="empty" v-if="BuyList.length == 0">
			暂无数据~
		</view>
        <!-- 发布需求 -->
        <view class="release-need" @click="toRelease">
            <image src="../static/images/public/release-req.png" mode=""></image>
        </view>

        <BuyPopup ref="buyPopupRef" :options="tabsList" @confirmed="getItem"></BuyPopup>
    </view>
</template>

<script>
import BuyPopup from '../components/buyPopup/buyPopup.vue'
import { getToken, checkToken } from '@/utils/auth'
import settleIn from '@/api/settleIn.js'
import Common from '@/api/common.js'
export default {
    name: 'BuyCar',
    components: {
        BuyPopup
    },
    data() {
        return {
            startCityItemValue: [],
            endCityItemValue: [],
            tabList: [{
                name: "我的",
                value: '1'
            },
            {
                name: "所有",
                value: '2'
            },
            ],
            tabActive: '1',

            tabsList: [],
            typeList: [

            ],
            priceList: [

            ],
            BuyList: [],
            CarList: [],
            pricerStr: '',
            startPrice: '',
            endPrice: '',
            vehicleType: '',
            vehicleName: '',
            selectType: '',
			roles:''
        }
    },

    async onLoad() {
        this.getList()
    },
    async onShow() {
		this.getList()
		
		Common.getInfo().then(res => {
			this.roles = res.roles
		})
    },
    methods: {
        checkType(item) {
            this.tabActive = item.value;
            this.vehicleType = ''
            this.vehicleName = ''
            this.pricerStr = ''
            this.startPrice = ''
            this.endPrice = ''
            this.getList()
        },

        toRelease() {
			//	是否是销售人员
			// let type = this.roles.some( item =>{return item == 'qcxsry';})
			let type = false
			let url = "/subPages/mine/sellingCars?type="+type;
            if (checkToken()) {
                uni.navigateTo({
                    url
                })
            }
        },
        toDetail(item) {
            let url = '/subPages/mine/buyCarDetails?id=' + item.id
            if (checkToken()) {
                uni.navigateTo({
                    url
                })
            }

        },
        getList() {
            let obj = {
                startPrice: this.startPrice,
                endPrice: this.endPrice,
                vehicleType: this.vehicleType
            }
            if (this.tabActive == 1) {
                this.getBuy(obj)
            } else {
                this.getBuy(obj)

            }
        },
		
		async removed(id){
			let res = await settleIn.below({id:id});
			if (res.code == 200) {
			   this.getList()
			}
		},
        // 获取销售公司
        async getBuy(obj) {
            let res = await settleIn.getAppletUserSellBuyPage(obj);
            if (res.code == 200) {
                this.BuyList = res.rows

            }
        },


        openAdress(type) {
            this.selectType = type
            if (type == 1) {
                this.tabsList = [
                    {
                        name: "全部",
                        value: '',
                        is: false
                    },
                    {
                        name: "新车",
                        value: '1',
                        is: false
                    },
                    {
                        name: "二手车",
                        value: '2',
                        is: false
                    },
                    {
                        name: "新能源",
                        value: '3',
                        is: false
                    }
                ]

            } else {
                this.tabsList = [
                    {
                        name: "全部",
                        value: ''
                    },
                    {
                        name: "10w-20w",
                        start: '10',
                        end: '20'
                    },
                    {
                        name: "20w-30w",
                        start: '20',
                        end: '30'
                    },
                    {
                        name: "30w-50w",
                        start: '30',
                        end: '50'
                    }, {
                        name: "50w以上",
                        start: '50',
                        end: ''
                    }
                ]
            }
            this.$refs.buyPopupRef.open()
        },
        clearFilx() {

            this.vehicleType = ''
            this.vehicleName = ''
            this.pricerStr = ''
            this.startPrice = ''
            this.endPrice = ''
            this.getList()
        },
        getItem(e) {

            if (this.selectType == 1) {
                this.vehicleType = e.value
                this.vehicleName = e.name
            } else {
                this.pricerStr = e.name
                this.startPrice = e.start
                this.endPrice = e.end
            }
            this.getList()

        }
    }
}
</script>

<style lang="scss" scoped>
.pageContent {
    background: #fff;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    padding: 30rpx 28rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.car-search {
    padding-top: 8rpx;
    padding-bottom: 16rpx;
}

.select-area-item {
    // width: 300rpx;
    width: 50%;
    flex: 1;
    height: 64rpx;
    background: #f6f6f6;
    font-size: 26rpx;
    color: #666;
    margin-right: 20rpx;
    border-radius: 8rpx;
    line-height: 64rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:last-of-type {
        margin-right: 0;
    }

    .area-name {
        display: inline-block;
        font-size: 26rpx;
        color: #333;
        max-width: 160rpx;
    }
}

.car-list {
    margin: 36rpx 28rpx;
    // width:100%;
    min-height: 180rpx;
    border-radius: 12rpx;
	padding: 10rpx;
	box-shadow: 2rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
    .car-img {
        width: 240rpx;
        height: 180rpx;
        border-radius: 12rpx;
        // border: 1rpx solid #000;
    }

    .car-item {
        display: flex;
    }

    .car-info {
        width: 380rpx;
        margin-left: 20rpx;
    }

    .info-text {
        // width: 630rpx;
        // height: 84rpx;
        color: #000000;
        font-family: "PingFang SC";
        font-size: 30rpx;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        opacity: 0.9;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
    }

    .info-text1 {
        color: #000000e6;
        font-family: "PingFang SC";
        font-size: 24rpx;
		width: 630rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin: 10rpx 0
    }

    .info-text2 {
		width: 260rpx;
        color: #1777ff;
        font-family: "PingFang SC";
        font-size: 32rpx;
        font-style: normal;
        font-weight: 500;
        line-height: 44rpx;
    }
	.info-flex{
		display: flex;
		justify-content: space-between;
	}
	.removed{
		margin-right: 50rpx;
		color: #1777ff;
	}
}

.header-box {
    display: flex;
    // margin-left: 100rpx;
    margin-bottom: 20rpx;

    .tab-list {
        display: flex;
        align-items: center;

        .tab-item {
            color: #000000;
            font-size: 30rpx;
            line-height: 1;
            opacity: 0.8;
            margin-left: 40rpx;
            // padding: 20rpx 0;
        }

        .active-item {
            display: flex;
            flex-direction: column;
            font-size: 34rpx;

            &::after {
                content: "";
                display: inline-block;
                height: 8rpx;
                width: 68rpx;
                background: linear-gradient(90deg, #2f85ff1a 0%, #2F85FF 100%);
                border-radius: 6rpx;
            }
        }
    }
}

.release-need {
    width: 248rpx;
    height: 88rpx;
    position: fixed;
    right: 0;
    bottom: 150rpx;

    image {
        width: 100%;
        height: 100%;
    }
}
	

.empty{
	margin-top: 150rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>